<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
form {
	margin:10px auto;
	width:400px;
	padding:40px;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	border-radius:10px;
	background-color:#366;
	font-weight:bold;
	color:#FFF;
}
form label {
	display:block;
	padding:5px;
}
form label span {
	width:20%;
	display:inline-block;
	font-family:"宋体";
	font-size:16px;
	text-align:right;
}
form label input {
	line-height:22px;
	height:25px;
	border:3px solid #f90;
	width:70%;
}
form label input:focus {
	border:3px solid #f00;
	outline:none;
}
form input[type=submit] {
	margin-left:22%;
	margin-top:20px;
	width:100px;
	border:3px solid #f00;
	background-color:#f00;
	font-size:18px;
	letter-spacing:5px;
	color:#fff;
	font-weight:bold;
}
form #error{
	border:1px solid #999;
	background-color:#ccc;
	font-size:12px;
	color:#f00;
	padding:5px;
	line-height:18px;
}
</style>
<script type="text/javascript">
function addError(err){
	document.getElementById("error").innerHTML += "* "+err+"<br />";
}
function clearError(){
	document.getElementById("error").innerHTML = "";
}
function invalidHandler(evt){
	// 获取出错元素的ValidityState对象
	var validity = evt.srcElement.validity;
	var str="";
	// 如果有自定义的提示信息，则使用它来提示
	if(validity.customError){
		str = evt.srcElement.validationMessage;
	}else{
		// 以下是检测的ValidityState对象的各个属性，以判断具体错误
		if(validity.valueMissing){
			str+="不能为空；";
		}
		if(validity.typeMismatch){
			str+="与类型不匹配；";
		}
		if(validity.patternMismatch){
			str+="与pattern正则不匹配；";
		}
		if(validity.tooLong){
			str+="字符过长；";
		}
		if(validity.rangeUnderflow){
			str+="不能小于最小值；";
		}
		if(validity.rangeOverflow){
			str+="不能大于最大值；";
		}
		if(validity.stepMismatch){
			str+="不符合step特性所推算出的规则；";
		}
		// 使用表单元素的title特性值来组合提示信息
		str = evt.srcElement.title + str;
	}
	// 添加错误提示
	addError(str);
	// 阻止事件冒泡
	evt.stopPropagation();
	// 取消后续的浏览器默认的处理方式
	evt.preventDefault();
}
window.onload=function(){
	var register=document.getElementById("register");
	// 注册监听表单中的invalid事件，捕获到错误即处理
	register.addEventListener("invalid",invalidHandler,true);
	// 为年龄项添加自定义错误提示信息
	document.getElementById("age").setCustomValidity("年龄不能通过验证！");
}
</script>
</head>
<body>
<form id="register" name="register">
  <label for="firstName"><span>姓名</span>
    <input name="firstName" type="text" title="姓名" placeholder="请输入您的姓名" required />
  </label>
  <label for="age"><span>年龄</span>
    <input id="age" name="age" type="range" min="0" max="99" step="1" value="20" onchange="displayAage.value=this.value" />
    <output name="displayAage">20</output>
  </label>
  <label for="emailaddress"><span>邮箱</span>
    <input type="email" name="emailaddress" title="邮箱" placeholder="请输入您的邮箱" required />
  </label>
  <label for="weibo"><span>微博</span>
    <input type="url" name="weibo" title="微博" placeholder="请输入您的微博地址" required />
  </label>
  <label for="graduation"><span>毕业时间</span>
    <input name="graduation" type="date" title="毕业时间" placeholder="请输入您的毕业时间" />
  </label>
  <label for="score"><span>考试成绩</span>
    <input name="score" type="number" title="考试成绩" placeholder="请输入您的考试成绩" min="0" max="10" step="0.2" />
  </label>
  <label for="country"><span>国家</span>
    <input name="country" type="text" title="国家" list="countries" />
  </label>
  <datalist id="countries">
    <option value="Australia">Australia</option>
    <option value="Germany">Germany</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States </option>
  </datalist>
  <input type="submit" name="submit" value="提交" onclick="clearError()" />
  <div id="error"></div>
</form>
</body>
</html>
